<template>
  <div ref="paiming" style="background: #fff;height: 100%;width: 100%;position: relative;overflow: hidden;" :id="paimingTypeData.id" class="_wz_char">

  </div>
</template>
<script>
export default {
  props: ["buttomHeight", "paimingTypeData"],//接收来自父组件的数据
  data() {
    return {}
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;
    var data = that.paimingTypeData.data;
    var chart = new G2.Chart({
      container: that.paimingTypeData.id,
      forceFit: true,
      height: that.buttomHeight,
      padding: that.paimingTypeData.style.padding
    });
    chart.source(data);
    chart.axis('time', {
      label: {
        textStyle: {
          fill: '#aaaaaa'
        }
      },
      tickLine: {
        alignWithLabel: false,
        length: 0
      }
    });

    chart.axis('value', {
      label: {
        textStyle: {
          fill: '#aaaaaa'
        },
        formatter: function formatter(text) {
          return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
        }
      },
      title: {
        offset: 80
      }
    });

    chart.legend(false);
    chart.coord().transpose();
    chart.legend({
      position: 'right-center'
    });
    chart.interval().position('time*value').color('type', ['#5DB1FF', '#59D4D4']).opacity(1);
    chart.render();
  },
  methods: {//执行的方法

  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
